<template>
	<view class="my-box">
		<u-sticky bgColor="red">
			<view class="navbar">
				<view class="nav-item" :class="{current: filterIndex === 0}" @click="tabClick(0)">
					我的采购
				</view>
				<view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)">
					我的供应商
				</view>
			</view>
		</u-sticky>
		<view class="my-list-box">
			<view class="buy-title" v-if="filterIndex==0">
				历史采购
			</view>
			<view class="buy-list" v-for="(item,index) in myList" :key="index">
				<view class="buy-top">
					<!-- 是否过期 -->
					<view class="mark-date" v-if="item.activeStatus">
						已过期
					</view>
					<view class="mark-collection" v-if="item.collec">
						<img src="https://file.casugn.com/storecompcard//mBjjyxq1i74Aa78abb376722c7b4ffa682224920060e_1663137688378.png"
							alt="">
					</view>
					<view class="buy-top-title">
						{{item.name}}
					</view>
					<view class="buy-top-cont">
						<view class="buy-top-cont-lt">
							采购数量：<text>{{item.buyNum}}</text>
						</view>
						<view class="buy-top-cont-rt">
							联系电话：<text>{{item.userTel}}</text>
						</view>
					</view>
					<view class="buy-top-bt">
						<!-- <view class="buy-top-bt-tel">
							<text>0</text>人联系
						</view> -->
						<view class="buy-top-bt-date">
							{{item.endTime==null?'长期采购':'截止到:'+item.endTime}}
						</view>
					</view>
				</view>
				<view class="buy-btm" v-if="!item.collec&&filterIndex==0">
					<!-- icon="trash" iconColor="#2684ff" -->
					<u-button text="删除" :customStyle="customStyle1" color="red" :plain="true"
						@click="deleteInfo(item,index)"></u-button>
					<u-button text="编辑" :customStyle="customStyle2" color="#2684ff" :plain="true"
						@click="editInfo(item,index)"></u-button>
				</view>
				<view class="buy-btm" v-if="item.collec&&filterIndex==0">
					<!-- icon="trash" iconColor="#2684ff" -->
					<u-button text="取消收藏" :customStyle="customStyle1" color="red" :plain="true"
						@click="cancelCollect(item,index)"></u-button>
					<!-- <u-button text="编辑" :customStyle="customStyle2" color="#2684ff" :plain="true" @click="editInfo(item,index)"></u-button> -->
				</view>

				<view class="buy-btm" v-if="filterIndex==1">
					<!-- icon="trash" iconColor="#2684ff" -->
					<u-button text="删除" :customStyle="customStyle1" color="red" :plain="true"
						@click="deleteInfo1(item,index)"></u-button>
					<u-button text="编辑" :customStyle="customStyle2" color="#2684ff" :plain="true"
						@click="editInfo1(item,index)"></u-button>
				</view>

			</view>
		</view>

		<!-- 删除弹窗 -->
		<u-modal :show="modalShow" title="确定删除采购需求?" closeOnClickOverlay showCancelButton @confirm="confirm"
			@cancel="modalShow=false" @close="modalShow=false"></u-modal>
		<!-- 取消收藏弹窗 -->
		<u-modal :show="collectShow" title="确定取消当前收藏?" closeOnClickOverlay showCancelButton @confirm="collectConfirm"
			@cancel="collectShow=false" @close="collectShow=false"></u-modal>
		<!-- 我的采购删除弹窗 -->
		<u-modal :show="modalShow1" title="确定删除采购需求?" closeOnClickOverlay showCancelButton @confirm="confirm1"
			@cancel="modalShow1=false" @close="modalShow1=false"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				openId: '',
				filterIndex: 0,
				pageNo: 1,
				pageSize: 10,
				total: 0,
				name: '',
				myList: [],
				customStyle1: {
					border: "none",
				},
				customStyle2: {
					border: "none",
				},
				recordId: '', //收藏id
				collectShow: false, //收藏弹窗
				deleteId: '', //删除id
				modalShow: false, //删除弹窗
				deleteId1: '', //我的供应删除id
				modalShow1: false, //我的供应删除

			}
		},
		onShow() {
			let openId = uni.getStorageSync('openId')
			console.log("openId", openId)
			this.openId = openId.openid

			let a = uni.getStorageSync('myMarketIndex')
			if (a == 1) {
				this.filterIndex = 1
				this.myList = []
				this.querySupplyList()
			} else {
				this.myList = []
				this.queryList()
			}
		},
		//加载更多
		onReachBottom() {
			if (this.filterIndex == 0) {
				if (this.pageNo * this.pageSize > this.total) {
					return uni.showToast({
						title: '没有更多数据',
						icon: 'none'
					})
				} else {
					this.pageNo++
					this.queryList()
				}
			} else if (this.filterIndex == 1) {
				if (this.pageNo * this.pageSize > this.total) {
					return uni.showToast({
						title: '没有更多数据',
						icon: 'none'
					})
				} else {
					this.pageNo++
					this.querySupplyList()
				}
			}


		},
		onUnload() {
			//修改上级页面的 tabVal 值为 0
			uni.$emit('resetTabVal', 0)
		},
		methods: {
			//筛选点击
			tabClick(index) {
				console.log(index)
				if (this.filterIndex === index && index !== 2) {
					return;
				}
				this.filterIndex = index;
				if (index === 0) {
					this.pageNo = 1
					this.myList = []
					this.queryList()
				} else {
					this.pageNo = 1
					this.myList = []
					this.querySupplyList()
				}
			},
			// 我的采购列表数据
			queryList() {
				this.$api.queryMyCouponLists(this.name, this.openId, this.pageNo, this.pageSize).then(res => {
					console.log(res)
					if (res.success) {
						this.myList = [...this.myList, ...res.result.records]
						this.total = res.result.total
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						this.myList = []
						this.total = 0
					}
				})
			},
			// 取消收藏
			cancelCollect(item, index) {
				console.log(item, index)
				this.collectShow = true
				this.recordId = item.id
			},
			// 确认取消收藏
			collectConfirm() {
				// 收藏
				let data = {
					openId: this.openId,
					recordId: this.recordId,
					type: 2
				}
				this.$api.collectionToBuy(data).then(res => {
					console.log(res)
					if (res.success) {
						this.collectShow = false
						this.myList = []
						this.queryList()
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			// 删除弹窗
			deleteInfo(item, index) {
				console.log(item, index)
				this.modalShow = true
				this.deleteId = item.id
			},
			// 删除确认
			confirm() {
				this.$api.deleteMyBuyListsById(this.deleteId).then(res => {
					console.log(res)
					if (res.success) {
						uni.showToast({
							title: res.result
						})
						this.modalShow = false
						this.myList = []
						this.queryList()
					}
				})
			},
			// 编辑
			editInfo(item, index) {
				console.log(item, index)
				uni.setStorageSync('myMarketIndex', this.filterIndex)
				uni.navigateTo({
					url: '/pagesBusiness/purchase/purchase?editId=' + item.id
				})
			},

			// 我的供应商列表数据
			querySupplyList() {
				this.$api.queryMySupplyListsByOpenId(this.name, this.openId, this.pageNo, this.pageSize).then(res => {
					console.log(res)
					if (res.success) {
						this.myList = [...this.myList, ...res.result.records]
						this.total = res.result.total
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						this.myList = []
						this.total = 0
					}
				})
			},
			editInfo1(item, index) {
				console.log(item, index)
				this.$api.queryMyHistorySupplyListsById(item.id).then(res => {
					console.log(res)
					if (res.success) {
						this.$store.commit('setMySupInfo', res.result)
						uni.setStorageSync('myMarketIndex', this.filterIndex)
						uni.navigateTo({
							url: '/pagesBusiness/supply/supply'
						})
					}
				})

			},
			deleteInfo1(item, index) {
				console.log(item, index)
				this.modalShow1 = true
				this.deleteId1 = item.id
			},
			confirm1() {
				this.$api.deleteMySupplyListsById(this.deleteId).then(res => {
					console.log(res)
					if (res.success) {
						uni.showToast({
							title: res.result
						})
						this.modalShow1 = false
						this.myList = []
						this.total = 0
						this.pageNo = 1
						this.querySupplyList()
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.my-box {
		padding: 20upx;

		.navbar {
			position: relative;
			// left: 0;
			// top: 0; //暂定为0 
			display: flex;
			width: 100%;
			height: 80upx;
			box-shadow: 0 2upx 10upx rgba(0, 0, 0, .06);
			z-index: 20;
			background: #fff;
			margin-top: 20upx;

			.nav-item {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				font-size: 26upx;
				font-weight: 600;
				// color: $font-color-dark;
				position: relative;

				&.current {
					color: #423BFE;

					&:after {
						content: '';
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						width: 120upx;
						height: 0;
						border-bottom: 4upx solid #423BFE;
					}
				}
			}
		}

		.my-list-box {
			margin-top: 20upx;

			.buy-title {
				font-weight: bold;
			}

			.buy-list {
				box-shadow: 0 2upx 10upx rgba(0, 0, 0, .06);
				margin-top: 30upx;
				background: white;
				border-radius: 10upx;
				position: relative;
				padding: 20upx;

				.buy-top {
					border-bottom: 1px solid #f4f4f4;
					padding-bottom: 20upx;
					position: relative;

					.mark-date {
						position: absolute;
						right: -25upx;
						transform: rotateZ(30deg);
						color: #999999;
					}

					.mark-collection {
						position: absolute;
						right: 80upx;
						top: -5upx;
						width: 60upx;
						height: 60upx;

						img {
							width: 60upx;
							height: 60upx;
						}
					}

					.buy-top-title {
						font-size: 36upx;
						font-weight: bold;
					}

					.buy-top-cont {
						font-size: 32upx;
						color: #666666;
						display: flex;
						justify-content: space-between;
						margin-top: 20upx;
					}

					.buy-top-bt {
						display: flex;
						font-size: 28upx;
						margin-top: 20upx;
						color: #999999;

						.buy-top-bt-date {
							// margin-left: 10upx;
						}
					}
				}

				.buy-btm {
					display: flex;
					margin-top: 20upx;

					.buy-btn1 {
						border: none;
					}
				}

			}
		}
	}
</style>


</style>
